<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/userProfiles.css">
    <link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>

    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>

    <script src="/js/common.js"></script>

    <!--一\profile页面:用户简介,初始化查询-->
    <script>
        //拿到用户id
        var userId = getParams().userId;
        //拿到当前用户id
        var currentUserId = JSON.parse(sessionStorage.getItem("user")).id;
        //是否是粉丝
        var isFan = false;

        $(function () {
            if (!userId) return;
            //判断是否为自己的页面
            if (currentUserId == userId) $("#userInfo .follow_div").detach();

            //1:查询 用户信息
            $.ajax({
                type: "Get",
                url: "/users/" + userId,
                success: function (userInfo) {
                    //3:渲染用户信息
                    $("#userInfo").renderValues(userInfo, {
                        'get_coverImgUrl': function (item, value) {
                            $(item).css("background-image", "url('" + value + "')");
                        }
                    });
                }
            });
            //2:查询关注 信息
            if (currentUserId) {
                $.ajax({
                    url: "/userFollows/" + userId + "/followInfo",
                    type: "Get",
                    data: {currentUserId: currentUserId},
                    success: function (followInfo) {
                        if (followInfo) {
                            //3修改关注信息
                            updateFollowPart(followInfo);
                        }
                    }
                });
            }

            /*------------私信--------wh------------------*/
            var params = getParams();
            userId = params.userId;
            $("#letterBtn").click(function () {
                window.location.href="/mine/message/singleletter.html?userId="+userId;

            })
            /*--------------end--------------------------*/
        });

        /**
         * 修改关注信息
         * @param followInfo 关注信息{isFollowed,followNums,fansNums}
         */
        function updateFollowPart(followInfo) {
            //1:渲染关注数和粉丝数
            $(".num").renderValues(followInfo);
            //2:渲染关注按钮
            isFan = followInfo.isFollowed;
            if (isFan) {
                $followBtn.removeClass("btn-success");
                $followBtn.html("已关注");
            } else {
                $followBtn.html("关注");
                $followBtn.addClass("btn-success");
            }
        }
    </script>
    <!--二\关注功能-->
    <script>
        var $followBtn; // 关注按钮
        $(function () {
            $followBtn = $("#followBtn");
            //1:关注点击按钮事件
            $followBtn.click(function () {
                //2:必须登陆,不能关注自己
                if (userId === currentUserId) $.messages.alert("不可以自己关注自己");
                if (!currentUserId) $.messages.confirm("需要登陆才可以关注");
                //3:ajaxType 修改(取消关注)/新增(关注)
                var ajaxType;
                if (isFan) ajaxType = "Put";
                else ajaxType = "Post";
                //4:发送请求
                $.ajax({
                    url: "/userFollows/" + currentUserId,
                    type: ajaxType,
                    data: {masterUserId: userId},
                    success: function (result) {
                        console.log(result);
                        if (result.success) {
                            console.log(result.data);
                            //5:更新页面关注信息
                            updateFollowPart(JSON.parse(result.data));
                        }
                    }
                });

            });
        })
    </script>

    <!--三\游记动态-->
    <script>
        //分页参数
        var hasNextPage;
        var currentPage = 1;
        var totalTravelList = [];

        //1:请求游记页面
        $(function () {
            if (!userId) return;
            queryNextTravelPage();
        });

        /**
         * 更新分页参数
         * @param newCurrentPage
         * @param newHasNextPage
         * @param newTravelList
         */
        function updatePageParams(newCurrentPage, newHasNextPage, newTravelList) {
            currentPage = newCurrentPage;
            hasNextPage = newHasNextPage;
            totalTravelList = $.merge(totalTravelList, newTravelList);
        }

        //2:滑动分页
        $(window).scroll(function () {
            if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                // 解决底部翻页问题
                if (hasNextPage) {
                    queryNextTravelPage();
                } else {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '深不见底还是到底啦~',
                        autoClose: 2500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
            }
        });

        /**
         * 查询分页数据,并渲染到页面,添加到totalTravelList,更新分页参数
         */
        function queryNextTravelPage() {
            $.ajax({
                url: "/travels",
                type: "Get",
                data: {
                    authorId: userId,
                    currentPage: currentPage,
                },
                success: function (travelList) {
                    console.log("travelList");
                    console.log(travelList);
                    //更新分页参数
                    updatePageParams(travelList.nextPage, travelList.hasNextPage, travelList.list);
                    //渲染list页面
                    $("#travels").renderValues({travelList: totalTravelList}, {
                        'get_href': function (item, value) {
                            $(item).attr("href", $(item).data("href") + value);
                        }
                    });
                }
            });
        }
    </script>
    <!--四/进入粉丝页面-->
    <script>
        $(function () {
            //1:添加href
            var $getHref = $(".get_href");
            $getHref.attr("href", $getHref.data("href") + userId);
        })
    </script>

</head>
<body>
<div id="userInfo">
    <div class="container bg"
         render-key="coverImgUrl" render-fun="get_coverImgUrl">
        <a href="/index.html" class="my-arrow">
            <span><i class="fa fa-chevron-left fa-2x"></i></span>
        </a>
        <div class="container">
            <div class="info">
                <img class="rounded-circle" width="17%" render-src="headImgUrl">
                <p class="name" render-html="nickName"></p>
                <p render-html="sign"></p>
                <div class="row num">
                    <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                        <div>
                            <span render-html="followNums"></span>
                        </div>
                        <div>
                            <!--wym:添加关注list页面-->
                            <a data-href="/mine/followPage.html?userId=" class="get_href"><span>关注</span></a>
                        </div>
                    </div>
                    <div class="col-2">
                        <div>
                            <span render-html="fansNums"></span>
                        </div>
                        <div>
                            <span>粉丝</span>
                        </div>
                    </div>
                    <div class="col follow_div">
                        <button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
                        <button class="btn btn-success ibtn" id="followBtn">关注</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
                TA的游记[<span>1</span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
                TA的点评[<span>1</span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
                TA的旅行单[<span>0</span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">

            <dl class="list" render-loop="travelList">
                <dd>
                    <a data-href="travelContent.html?id=" render-fun="get_href" render-key="travelList.id">
                        <img render-src="travelList.coverUrl">
                        <p><span class="title" render-html="travelList.title"></span>
                            <span class="span-right">
						 				<span>0</span> <i class="fa fa-thumbs-o-up"></i></span>
                        </p>
                    </a>
                    <hr>
                </dd>
            </dl>
        </div>

        <div class="comment tab-pane fade " id="comments">
            <input type="hidden" name="currentPage" value="1">
            <input type="hidden" name="pageSize" value="5">
            <input type="hidden" name="rows" value="1">
            <div>
                <div class="row">
                    <div class="col-2 comment-head">
                        <img class="rounded-circle" src="/upload/7e854d1d-a7be-4360-8943-8771d18ee0e3.jpg">
                    </div>
                    <div class="col">
                        <span class="comment-star"><i class="fa fa-star"></i><i class="fa fa-star"></i><i
                                class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></span>

                        <span class="comment-date">2018-07-11</span>
                        <div class="comment-content">
                            <a href="strategyComment.html" data-id="4">
                                <p>骑了个单车到沙面，春风把从上下九和宝华路带来的燥热吹散。沙面临江，下午的时光让这富有异国风情的公园显得更加宁静惬意，哪怕...</p>
                            </a>
                        </div>
                        <ul class="comment-img">
                            <li>
                                <img src="/upload/63bb765d-5dff-44f8-b7f1-cb338b9b9f95.jpeg">
                            </li>
                            <li>
                                <img src="/upload/7d437f8d-a476-465c-bd84-e93a03d8efd5.jpeg">
                            </li>
                        </ul>

                        <div class="comment-link">
                            <a href="strategyCatalogs.html" data-id="2">
                                <img src="/upload/e5e8a1a7-b127-4145-9fd0-a94e29f752ba.jpeg"> <span>广州攻略</span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <div class="tab-pane fade" id="pills-contact">.3333..</div>
    </div>
</div>


</body>
</html>